<template>
  <Modal v-model:visible="visibleRef" class="modal-await-body"
    :footer="null" :centered="true">
    <div class="modal-await">
        <p>功能开发中，敬请期待</p>
    </div>
  </Modal>
</template>

<script lang="ts" >
import { defineComponent, toRefs, PropType, ref, watch, watchEffect } from "vue";
import { Modal } from "ant-design-vue";

export default defineComponent({
  name: 'ModalAwait',
  components: {
    Modal,
  },
  props: {
    visible: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  setup(props, { emit }) {
    const { visible } = toRefs(props); 

    const visibleRef = ref(false);

    watch(visible, (cur)=> { 
      visibleRef.value = cur;
    })

    watchEffect(() => { emit('update:visible', visibleRef.value) })

    return {
      visibleRef
    };
  },
});
</script>

<style lang="less">
.modal-await-body {
  .ant-modal-body {
      background: url("/@/assets/img/await-bg.png");
  }
}

</style>

<style lang="less" scoped>

.modal-await {
    height: 312px;
    padding-top: 250px;

    p {
        font-size: 20px;
        font-weight: bold;
        line-height: 22px;
        text-align: center;

    }
}
</style>

